<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    v-bind="$attrs"
    :background-color="backgroundColor"
    @select="handleSelect"
  >
    <el-menu-item
      v-for="(item, index) in naviList"
      :key="index"
      :index="item.naviId"
    >
      {{item.text}}
    </el-menu-item>
  </el-menu>
</template>

<script>
  import { ref } from 'vue'
  import { ElMenu, ElMenuItem } from 'element-plus'
  import { state } from '@naturefw/nf-state'

</script>

<script setup>
  
  const props = defineProps({
    'background-color': {
      tyoe: String,
      default: '#ece5d9'
    }
  })

  const { current, naviList } = state

  const activeIndex2 = ref(naviList[0].naviId)
  
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
    const navi = naviList.find((item) => item.naviId === key)
    if (navi.link === 'menu') {
      // 打开菜单
      current.naviId = key
    } else {
      // 打开连接
      window.open(navi.link, '_blank')
    }
  }

</script>
